<template>
  <div id="left">
    <template v-if="!loading">
      <p class="title width_300">
        <img src="@/assets/meng/video03_01.png" /><span>商品信息</span>
      </p>
      <section class="s1">
        <div :class="{ disable: false }">
          <img :src="response && response.proLogo" />
          <div v-if="false">已下架</div>
        </div>
        <div>
          <el-tooltip
            class="item"
            effect="light"
            v-if="response"
            :content="response.proTitle"
            :hide-after="2000"
            placement="top"
            popper-class="mytooltip"
          >
            <p>{{ response && response.proTitle }}</p>
          </el-tooltip>
          <p>
            <span
              ><span v-if="response">￥</span
              >{{ response && response.proPrice }}</span
            >
            <span
              ><span v-if="response">￥</span
              >{{ response && response.proCostPrice }}</span
            >
            <el-popover
              placement="bottom"
              trigger="hover"
              popper-class="hot_video_popover"
              v-if="response && response.profrom == 2"
            >
              <vue-qr
                :size="150"
                :margin="0"
                :auto-color="true"
                v-if="response"
                :dot-scale="1"
                :text="response.proCode"
              />
              <p>【抖音扫码，查看商品】</p>
              <img slot="reference" src="@/assets/meng/hot_video13.png" />
            </el-popover>
            <span v-else></span>
            <SourceIcon v-if="response" :sourceid="response.profrom" />
          </p>
        </div>
      </section>
      <section class="s2">
        <span v-if="response && response.brand">品牌：</span>
        <span v-if="response && response.brand">{{ response.brand }}</span>
        <span>分类：</span>
        <span>{{ response && response.proCategory }}</span>
        <br />
        <!-- <div></div> -->
        <!-- <span class="special">上架时间：</span>
        <span v-if="response">{{response.onlineTime!=''?timestamp(response.onlineTime,'Y-M-D'):'--'}}</span> -->
      </section>
      <section
        class="s3"
        ref="s3"
        v-if="response && response.rankList.length != 0"
      >
        <button
          v-for="(item, index) in response.rankList"
          @click="go_to_page01(item.rankName)"
          :key="index + 'data01'"
        >
          {{ item.rankName }}
        </button>
      </section>
      <p
        class="s4"
        @click="
          is_show_s3 = false;
          $refs.s3.style['max-height'] = '10000px';
        "
        v-if="response && is_show_s3 && response.rankList.length > 3"
      >
        展开<i class="el-icon-arrow-down"></i>
      </p>
      <p
        class="s4"
        @click="
          is_show_s3 = true;
          $refs.s3.style['max-height'] = '129px';
        "
        v-if="response && !is_show_s3 && response.rankList.length != 0"
      >
        收起<i class="el-icon-arrow-up"></i>
      </p>
      <div class="line"></div>

      <p class="title" v-if="response && response.profrom == 2 && response01">
        <img src="@/assets/meng/left01.png" /><span class="mr_6">{{
          response01 && response01.shopTitle
        }}</span>
        <!-- <el-popover placement="bottom"
                    trigger="hover"
                    popper-class="hot_video_popover">
          <vue-qr :size="150"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="response01&&response01.shopUrl?response01.shopUrl:''" />
          <p>【抖音扫码，查看视频】</p>
          <img slot="reference"
               src="@/assets/meng/hot_video13.png">
        </el-popover> -->
      </p>
      <section
        class="s5"
        v-if="response && response.profrom == 2 && response01"
      >
        <span>商品体验：</span>
        <span>{{
          response01 && response01.wordofmouth ? response01.wordofmouth : "--"
        }}</span>
        <span>商家服务：</span>
        <span>{{
          response01 && response01.serviceattitude
            ? response01.serviceattitude
            : "--"
        }}</span>
        <br />
        <div></div>
        <span>物流体验：</span>
        <span>{{
          response01 && response01.deliveryspeed
            ? response01.deliveryspeed
            : "--"
        }}</span>
      </section>
      <p class="title">
        <img src="@/assets/wang/tdetails/dataimg.png" /><span>数据概况</span>
      </p>
      <section class="s6">
        <div>
          <p>
            <span v-if="response">{{ format_num(response.views30Day) }}</span>
          </p>
          <p>30天浏览量</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{ format_num(response.volume30Day) }}</span>
          </p>
          <p>30天订单量</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{
              formatRate(response.conversionRatio, 1, 1)
            }}</span>
          </p>
          <p>转化率</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{
              format_num(response.associatedVideo)
            }}</span>
          </p>
          <p>关联视频数</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{
              format_num(response.associatedlive)
            }}</span>
          </p>
          <p>关联直播数</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{
              format_num(response.associatedAuthor)
            }}</span>
          </p>
          <p>热推达人</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{ format_num(response.views) }}</span>
          </p>
          <p>访客量</p>
        </div>
        <div>
          <p>
            <span v-if="response">{{ format_num(response.volume) }}</span>
          </p>
          <p>全网销量</p>
        </div>
      </section>
      <button class="s7">
        <span>数据更新时间</span><span v-if="time != 0">{{ time }}</span
        ><span v-if="time == 0">--</span
        ><img @click="reload" src="@/assets/wang/tdetails/refresh.png" />
      </button>
      <section v-if="response">
        <button
          class="s8"
          v-if="!response.isCollect"
          @click="add_star(1, response.proId)"
        >
          <img src="@/assets/meng/left02.png" /><span>添加收藏</span>
        </button>
        <button class="s9" v-else @click="add_star(0, response.proId)">
          <span>取消收藏</span>
        </button>
      </section>
    </template>
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
  </div>
</template>
<script>
import SourceIcon from "@/component/SourceIcon.vue";
import VueQr from "vue-qr";
export default {
  name: "left",
  components: { VueQr, SourceIcon },
  data() {
    return {
      response: null,
      response01: null,
      is_show_s3: true,
      loading: true,
      time: "",
    };
  },
  props: ["id"],
  computed: {},
  created() {
    this.get_data();
  },
  mounted() {},
  methods: {
    reload() {
      this.get_data();
    },
    // 收藏
    add_star(flag, id) {
      let that = this;
      if (flag) {
        this.$axios
          .post("/api/collection/InsertCollection", {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, "isCollect", 1);
              // console.log(this.response)

              this.$message({
                message: "收藏成功！",
                type: "success",
                duration: 2000,
              });
            } else {
              this.$message({
                message: "收藏失败！",
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "收藏失败！",
              type: "error",
              duration: 2000,
            });
          });
      } else {
        this.$axios
          .post("/api/collection/CancelCollection", {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, "isCollect", 0);
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                duration: 2000,
              });
            } else {
              this.$message({
                message: "取消收藏失败！",
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "取消收藏失败！",
              type: "error",
              duration: 2000,
              // offset: '400',
            });
          });
      }
    },

    get_data() {
      let that = this;
      this.loading = true;
      this.$axios({
        method: "get",
        url: "/api/product/info",
        params: {
          proId: that.id,
        },
      })
        .then((response) => {
          this.loading = false;
          if (response.data.code == 0) {
            this.response = response.data.data;
            this.time = this.timestamp(this.response.timeUnix, "Y-M-D h:m:s");
            // console.log(this.response)
            this.$axios({
              method: "get",
              url: "/api/shop/info",
              params: {
                shopId: response.data.data.proShop,
              },
            })
              .then((response01) => {
                if (response01.data.code == 0) {
                  this.response01 = response01.data.data;
                  //   console.log(this.response01)
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    go_to_page01(parm) {
      let router = this.$router.resolve({
        path: `/talent_main/goodsListRoot/${parm.split("排")[0]}/${
          parm.split("排行榜")[1].split("第")[0]
        }`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style scoped lang='less'>
.loading {
  margin-top: 300px;
}
.s9 {
  img {
    width: 16px;
    height: 16px;
    // display: none;
    margin-right: 6px;
  }
  span {
    margin-top: -1px;
  }
  background-color: #f5f5f5;
  border: solid 1px #e5e5e5;
  color: #888;
  width: 150px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}
.s8 {
  img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  span {
    margin-top: -1px;
  }
  width: 150px;
  height: 48px;
  background-color: #f6a302;
  border: 1px solid #f6a302;
  border-radius: 4px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  font-size: 16px;
  color: #fff;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
}
.s7 {
  cursor: auto;
  margin-top: 28px;
  width: 300px;
  height: 32px;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: solid 1px #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 13px;
  letter-spacing: 0px;
  > span:nth-child(1) {
    font-size: 14px;
    margin-top: -2px;
    letter-spacing: 0px;
    color: #888888;
  }
  > span:nth-child(2) {
    font-size: 16px;
    font-family: DINAlternate-Bold;
    letter-spacing: 0px;
    margin-top: 3px;
    color: #222;
  }
  img {
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
}
.s6 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  > div {
    width: 100px;
    text-align: center;
    margin-bottom: 25px;
    > p:nth-child(odd) {
      margin-bottom: 5px;
      color: #222222;
      font-size: 18px;
      font-family: DINAlternate-Bold;
    }
    > p:nth-child(even) {
      font-size: 14px;
      color: #888888;
    }
  }
}
.s5 {
  margin-bottom: 25px;
  margin-top: 28px;
  > div {
    height: 15px;
  }
  > span:nth-child(odd) {
    font-size: 14px;
    color: #888888;
  }
  > span:nth-child(even) {
    font-size: 14px;
    color: #fd7f2c;
    margin-right: 30px;
  }
}
.line {
  background-color: #e5e5e5;
  height: 1px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}
.s4 {
  color: #fd7f2c;
  font-size: 14px;
  margin-top: 30px;
  text-align: center;
  width: 100%;
  cursor: pointer;
  i {
    font-weight: bold;
  }
}
.s3 {
  max-height: 129px;
  overflow: hidden;
  button {
    background-color: #fff4ed;
    border-radius: 20px;
    margin-bottom: 14px;
    border: solid 1px #fd7f2c;
    padding: 6px 12px;
    display: block;
    color: #fd8a3e;
    font-size: 14px;
  }
}
.s2 {
  margin-bottom: 25px;
  > div {
    height: 15px;
  }
  > span:nth-child(odd) {
    font-size: 14px;
    color: #888888;
  }
  > span:nth-child(even) {
    font-size: 14px;
    color: #222222;
    margin-right: 30px;
  }
}
.s1 {
  margin-top: 23px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  .disable {
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    filter: grayscale(100%);
    filter: gray;
    opacity: 0.7;
  }

  > div:nth-child(1) {
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    margin-right: 20px;
    width: 80px;
    height: 80px;
    position: relative;
    > div {
      width: 80px;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 22px;
      line-height: 24px;
      color: #fff;
      background-color: #b5b5b5;
      font-size: 12px;
      text-align: center;
    }
    > img {
      width: 80px;
      height: 80px;
    }
  }
  > div {
    width: 194px;
    > p:nth-child(1) {
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
    }
    > p:nth-child(2) {
      display: flex;
      align-items: flex-end;
      > span:nth-child(1) {
        > span {
          font-size: 14px;
        }
        font-family: DINAlternate-Bold;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #ea1b0b;
        display: block;
        margin-bottom: -5px;
      }
      > span:nth-child(2) {
        margin-left: 2px;
        font-family: DINAlternate-Bold;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0px;
        color: #b5b5b5;
        text-decoration: line-through;
        display: block;
        margin-bottom: -4px;
      }
      > span:nth-child(3) img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
      > div:nth-child(4) {
        margin-left: 6px;
        display: inline-block;
      }
    }
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
.width_300 {
  width: 300px;
}
#left {
  width: 340px;
  height: fit-content;
  background-color: #ffffff;
  min-height: 100vh;
  border-radius: 6px;
  padding: 20px 20px 50px 20px;
  box-sizing: border-box;
}
</style>